<!--
 * @Author: yhy
 * @Date: 2020-12-07 19:59:28
 * @LastEditTime: 2020-12-07 22:16:35
 * @LastEditors: yhy
 * @Description: 
-->
<template>
  <div id="app">
    <div v-for="(itemOut, indexOut) in list" :key="indexOut">
      <el-form :model="itemOut" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <div>项目{{ indexOut }}</div>
        <el-button type="primary" @click="buttonSave(indexOut)">保存</el-button>
        <el-form-item label="活动名称" prop="name" :rules="rules.name">
          <el-input v-model="itemOut.name"></el-input>
        </el-form-item>
        <div class="tab">
          <div class="tab-item" v-for="(item, index) in itemOut.tabList" :key="index" @click="buttonTab(item, itemOut, indexOut)">C{{ index }}</div>
        </div>
        <div v-for="(item, index) in itemOut.tabList" :key="index">
          <!-- 1:ui类型的type  2当前点击的type -->
          <div v-if="item.type === 0 && item.type === itemOut.currentType" class="tab-content">
            <el-form-item label="男孩名称" :prop="`tabList.${index}.bodAge`" :rules="rules.bodAge">
              <el-input v-model="item.bodAge"></el-input>
            </el-form-item>
          </div>
          <div v-else-if="item.type === 1 && item.type === itemOut.currentType" class="tab-content">
            <el-form-item label="女孩名称" :prop="`tabList.${index}.girlAge`" :rules="rules.girlAge">
              <el-input v-model="item.girlAge"></el-input>
            </el-form-item>
            <el-form-item label="测试名称" :prop="`tabList.${index}.testAge`" :rules="rules.testAge">
              <el-input v-model="item.testAge"></el-input>
            </el-form-item>
          </div>
          <div v-else-if="item.type === 2 && item.type === itemOut.currentType" class="tab-content">
            <el-form-item label="我的名称" :prop="`tabList.${index}.myAge`" :rules="rules.myAge">
              <el-input v-model="item.myAge"></el-input>
            </el-form-item>
          </div>
          <!-- <div v-show="item.type === 0 && item.type === itemOut.currentType" class="tab-content">
            <el-form-item label="男孩名称" :prop="`tabList.${index}.bodAge`" :rules="rules.bodAge">
              <el-input v-model="item.bodAge"></el-input>
            </el-form-item>
          </div>
          <div v-show="item.type === 1 && item.type === itemOut.currentType" class="tab-content">
            <el-form-item label="女孩名称" :prop="`tabList.${index}.girlAge`" :rules="rules.girlAge">
              <el-input v-model="item.girlAge"></el-input>
            </el-form-item>
            <el-form-item label="测试名称" :prop="`tabList.${index}.testAge`" :rules="rules.testAge">
              <el-input v-model="item.testAge"></el-input>
            </el-form-item>
          </div>
          <div v-show="item.type === 2 && item.type === itemOut.currentType" class="tab-content">
            <el-form-item label="我的名称" :prop="`tabList.${index}.myAge`" :rules="rules.myAge">
              <el-input v-model="item.myAge"></el-input>
            </el-form-item>
          </div> -->
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      list: [],
      rules: {
        name: [{ required: true, message: '请输入活动名称', trigger: 'blur' }],
        bodAge: [{ required: true, message: '请输入男孩名称', trigger: 'blur' }],
        girlAge: [{ required: true, message: '请输入女孩名称', trigger: 'blur' }],
        myAge: [{ required: true, message: '请输入我的名称', trigger: 'blur' }],
        testAge: [{ required: true, message: '请输入测试名称', trigger: 'blur' }]
      }
    }
  },
  methods: {
    buttonTab(item, itemOut, indexOut) {
      this.$refs['ruleForm'][indexOut].validate(valid => {
        if (valid) {
          console.log('通过')
          itemOut.currentType = item.type
        } else {
          console.log('不通过,切换失败')
          return false
        }
      })
    },
    buttonSave(index) {
      this.$refs['ruleForm'][index].validate(valid => {
        if (valid) {
          console.log('通过')
        } else {
          console.log('不通过')
          return false
        }
      })
    }
  },
  mounted() {
    this.list = [
      {
        name: '',
        currentType: 0,
        tabList: [
          {
            type: 0,
            bodAge: ''
          },
          {
            type: 1,
            girlAge: '',
            testAge: ''
          },
          {
            type: 2,
            myAge: ''
          }
        ]
      },
      {
        name: '',
        currentType: 1,
        tabList: [
          {
            type: 0,
            bodAge: ''
          },
          {
            type: 1,
            girlAge: '',
            testAge: ''
          },
          {
            type: 2,
            myAge: ''
          }
        ]
      }
    ]
  }
}
</script>

<style lang="less">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
  .tab {
    display: flex;
    align-items: center;
    .tab-item {
      width: 100px;
      height: 40px;
      background: lightblue;
      margin-left: 10px;
      cursor: pointer;
    }
  }
  .tab-content {
    width: 500px;
    height: 200px;
    background: yellowgreen;
  }
}
</style>
